<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Popover-demo-primary">默认样式</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Popover气泡卡片</h1>
        <section class="markdown">
            <p>弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。</p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Popover-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>

<button type="button" class="btn btn-default" title="Popover title"
        data-container="body" data-toggle="popover" data-placement="left"
        data-content="左侧的 Popover 中的一些内容">
    左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title"
        data-container="body" data-toggle="popover" data-placement="top"
        data-content="顶部的 Popover 中的一些内容">
    顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title"
        data-container="body" data-toggle="popover" data-placement="bottom"
        data-content="底部的 Popover 中的一些内容">
    底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title"
        data-container="body" data-toggle="popover" data-placement="right"
        data-content="右侧的 Popover 中的一些内容">
    右侧的 Popover
</button>
<script>
$(function (){
    $("[data-toggle='popover']").popover();
});
</script>

                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Popover-demo-primary">默认样式</a></div>
                    <div>
                         <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; title=&quot;Popover title&quot;
        data-container=&quot;body&quot; data-toggle=&quot;popover&quot; data-placement=&quot;left&quot;
        data-content=&quot;左侧的 Popover 中的一些内容&quot;&gt;
    左侧的 Popover
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; title=&quot;Popover title&quot;
        data-container=&quot;body&quot; data-toggle=&quot;popover&quot; data-placement=&quot;top&quot;
        data-content=&quot;顶部的 Popover 中的一些内容&quot;&gt;
    顶部的 Popover
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; title=&quot;Popover title&quot;
        data-container=&quot;body&quot; data-toggle=&quot;popover&quot; data-placement=&quot;bottom&quot;
        data-content=&quot;底部的 Popover 中的一些内容&quot;&gt;
    底部的 Popover
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot; title=&quot;Popover title&quot;
        data-container=&quot;body&quot; data-toggle=&quot;popover&quot; data-placement=&quot;right&quot;
        data-content=&quot;右侧的 Popover 中的一些内容&quot;&gt;
    右侧的 Popover
&lt;/button&gt;
&lt;script&gt;
$(function (){
    $(&quot;[data-toggle=&#x27;popover&#x27;]&quot;).popover();
});
&lt;/script&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
    </div>
    <section class="markdown api-container">
        <h2 id="API"><span><!-- react-text: 341 -->API<!-- /react-text --></span><a href="#API" class="anchor">#</a></h2>
        <h3 id="Poppver"><span><!-- react-text: 345 -->Poppver<!-- /react-text --></span><a href="#Poppver" class="anchor">#</a></h3>
        <table>
            <thead>
                <tr>
                    <th>
                        <!-- react-text: 351 -->属性
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 353 -->说明
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 355 -->类型
                        <!-- /react-text -->
                    </th>
                    <th>
                        <!-- react-text: 357 -->默认值
                        <!-- /react-text -->
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <!-- react-text: 361 -->animation
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 363 -->向弹出框应用 CSS 褪色过渡效果。
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 365 -->boolean
                        <!-- /react-text -->
                    </td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 369 -->html
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 371 -->向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 373 -->boolean
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 375 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 378 -->placement
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 380 -->规定如何定位弹出框（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 382 -->string|function
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 384 -->top
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 387 -->selector
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 389 -->如果提供了一个选择器，弹出框对象将被委派到指定的目标。
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 391 -->string
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 393 -->false
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 396 -->title
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 398 -->如果未指定 title 属性，则 title 选项是默认的 title 值。
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 400 -->string | function
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 402 -->
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 405 -->trigger
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 407 -->定义如何触发弹出框： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 409 -->string
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 411 -->'hover focus'
                        <!-- /react-text -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- react-text: 414 -->delay
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 416 -->延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：
delay:
{ show: 500, hide: 100 }
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 418 -->  number | object
                        <!-- /react-text -->
                    </td>
                    <td>
                        <!-- react-text: 420 -->0
                        <!-- /react-text -->
                    </td>
                </tr>
            </tbody>
        </table>
        <style>
        #src-components-Button-demo-btn-group .atui-btn-group {
            margin-bottom: 10px;
        }
        </style>
    </section>
</article>